<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个EasyUI案例</title>
    <link rel="stylesheet" type="text/css" href="/statics/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/statics/js/easyui/themes/icon.css">
    <script type="text/javascript" src="/statics/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/statics/js/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<!-- 1.静态引入方式 -->
<div class="mydiv easyui-draggable" data-options="revert:true,disabled:true" style="background-color: red;height:200px;width:200px;">
    我的div
</div>
<div class="mydiv2" style="background-color: blue;height:200px;width:200px;">我的div</div>
<script type="text/javascript">
    $(function(){
        //第二种引入方式:动态加载
        $(".mydiv2").draggable({
                //属性
                revert:false,
                //事件
                onBeforeDrag:function(e){
                    console.log("拖动前触发：")
                    //return false;
                },
                onStopDrag:function(e){
                    if(e.clientX > 600){//不能再拖动
                        //方法
                        $(".mydiv2").draggable("disable");
                    }
                }
            }
        );
    })
</script>
</body>
</html>